.container {
  padding-top: 10rpx;

  .nav {
    padding-top: 38rpx;
    padding-bottom: 15rpx;
    background-color: white;
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
    color: #ABABAB;
    margin-bottom: 21rpx;

    view {
      &.active {
        color: #222222;
        font-size: 30rpx;
        border-bottom: 5rpx solid #FD649C;
        padding: 0 13rpx;
        font-weight: bold;
      }

    }
  }

  .main {

    .single {
      margin-bottom: 10rpx;
      background-color: white;
    }

    .info-base {
      padding: 31rpx 41rpx 31rpx 39rpx;
      display: flex;
      color: #333333;
      font-size: 26rpx;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        flex-direction: column;

        view {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
          width: 500rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

        }

        text {
          font-size: 26rpx;
          font-weight: 300;
          color: #333333;
          line-height: 26rpx;

        }
      }

      .status {
        color: #1ACE6A;
        font-size: 24rpx;

        &.complete {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
          line-height: 32px;

        }
      }
    }

    .info-detail {
      display: flex;
      padding: 0 41rpx 42rpx 68rpx;
      justify-content: space-between;

      image {
        width: 122rpx;
        height: 122rpx;
        border-radius: 5rpx;
      }

      .right {
        width: 483rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          font-size: 28rpx;
          color: #333333;
        }

        .center {
          text {
            color: #222222;

            &:nth-child(1) {
              font-size: 22rpx;
            }

            &:nth-child(2) {
              font-size: 32rpx;
            }
          }
        }

        .bottom {
          display: flex;
          flex-direction: column;
          line-height: 44rpx;
        }
      }
    }

    .line {
      width: 691rpx;
      height: 1px;
      background: #EEEEEE;
      margin: 0 auto;


    }

    .pay-real {
      padding: 27rpx 41rpx 40rpx 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      view {
        color: #222222;
        font-size: 22rpx;
      }

      text {
        color: #222222;
        font-size: 32rpx;
      }
    }

    .button-list {
      padding-bottom: 26rpx;
      padding-right: 41rpx;
      display: flex;
      justify-content: flex-end;

      my-labels {
        margin-left: 37rpx;
      }

      .style01 {
        width: 120rpx !important;
        height: 56rpx !important;
        line-height: 56rpx !important;
        background: #F8EFF2;
        border: 1px solid #FD649C;
        border-radius: 10rpx !important;
        color: #FD649C;
      }

      .style02 {
        width: 120rpx !important;
        height: 56rpx !important;
        line-height: 56rpx !important;

        background: #FD649C;
        border-radius: 10rpx !important;
      }
    }

    .ping{
      padding-right: 41rpx;
      display: flex;
      margin-bottom: 18rpx;
      justify-content: flex-end;
      color:#333333 ;
      text{
        color:#F92F5A ;
      }
    }
    .remian-time{
      padding-right: 41rpx;
      display: flex;
      justify-content: flex-end;
      color:#333333 ;
      text{
        color:#4565EC ;
      }
    }
  }
}